<template>
	<view class="myPages" :style="{paddingTop: `${search.top+search.height+10}px`}">
		<myHeard :search="search" :title="title" @goPath="goBack"></myHeard>
		<view class="myPages__main">
			<view class="myPages__mainBody">
				<view class="myPages__mainBodyItems">
					<view class="myPages__mainBodyItemsHeard">收货人
						<span>*</span>
					</view>
					<input placeholder="请填写收货人姓名" class="myPages__mainBodyItemsHeardInpt" v-model="from.name" />
				</view>
				<view class="myPages__mainBodyItems">
					<view class="myPages__mainBodyItemsHeard">联系电话<span>*</span></view>
					<input placeholder="请填写收货人手机号码" class="myPages__mainBodyItemsHeardInpt" v-model="from.phone" />
				</view>
				<view class="myPages__mainBodyItems" @click="pickerShow">
					<view class="myPages__mainBodyItemsHeard">选择地区<span>*</span></view>
					<input disabled placeholder="请选择收件地址（省、市、区）" class="myPages__mainBodyItemsHeardInpt"
						:value="from.cityId"></input>
					<!-- <input :disabled="true" class="myPages__mainBodyItemsHeardInpt" :value="from.cityId"></input> -->
				</view>
				<view class="myPages__mainBodyItems textareaH">
					<view class="myPages__mainBodyItemsHeard myPages__mainBodyItemsHeardInptH">详细地址<span>*</span></view>
					<textarea :show-confirm-bar="false" placeholder="例如街道、门牌号、小区、楼栋号、 单元室等等"
						class="myPages__mainBodyItemsHeardInpt myPages__mainBodyItemsHeardInptH"
						v-model="from.detail"></textarea>
				</view>
				<view @click="from.isDefault==0?from.isDefault=1:from.isDefault=0" class="myPages__mainBodyItems">
					<view class="myPages__mainBodyItemsHeard">设为默认地址</view>
					<image class="myPages__mainBodyItemsCatIem"
						:src="from.isDefault ? '/static/images/catIcon_active.png' : '/static/images/catIcon.png'">
					</image>
				</view>
				<view :class="isBlur ? 'myPages__mainBodyButtom' : 'myPages__mainBodyButtom_act'" @click="send">{{buttomText}}
				</view>
			</view>
		</view>
<!-- 删除成功 -->
		<u-overlay :opacity="0.01" :show="isShowDui">
			<view @click.stop="" class="overlayBox">
				<image src="/static/images/duiIcon.png"></image>
				<span>保存成功</span>
			</view>
		</u-overlay>

		<!-- 选择地址 -->
		<u-overlay :show="showPicker" @click="showPicker = false">
			<view class="saleBox"  @click.stop="">
				<view class="saleBox__Heard">选择地址<span>(必选)</span></view>
				<image @click.stop="pickerHide" class="saleBox__HeardImg" src="/static/images/chachaIcon.png">
					<picker-view :value="regionIndex" style="width:100%;height:500rpx;" indicator-style="height:50px;"
						@change="bindRegionChange">
						<picker-view-column>
							<block v-for="(item,index) in region" :key="index">
								<view style="line-height:50px;text-align:center;">{{item.name}}</view>
							</block>
						</picker-view-column>
						<picker-view-column>
							<block v-for="(item,index) in region[regionIndex[0]].childList" :key="index">
								<view style="line-height:50px;text-align:center;">{{item.name}}</view>
							</block>
						</picker-view-column>
						<picker-view-column>
							<block v-for="(item,index) in region[regionIndex[0]].childList[regionIndex[1]].childList"
								:key="index">
								<view style="line-height:50px;text-align:center;">{{item.name}}</view>
							</block>
						</picker-view-column>
					</picker-view>
					<view @click.stop="pickerConfirm" :class="'saleBox__MainItem saleBox__MainItem--red'">
						确定</view>
			</view>
		</u-overlay>



	</view>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	import myHeard from '@/components/myHeard/index.vue'
	let that = null;
	export default {
		components: {
			myHeard,
			pickRegions
		},
		data() {
			return {
				title: '添加新地址',
				isTure: false,
				showPicker: false,
				region: [],
				regionIndex: [0, 0, 0],
				from: {
					name: '',
					detail: '',
					phone: '',
					isDefault: 1,
					cityId: '',
					provinceId: '',
					city: '',
					regionId: '',
				},
				addressId: '',
				isBlur: false,
				isShowDui: false,
				buttomText: '保存'

			}
		},
		onLoad(oprtion) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			console.log(oprtion)
			if (uni.getStorageSync('region')) {
				this.region = uni.getStorageSync('region');
			}
			if (oprtion.obj) {
				let newObj = JSON.parse(oprtion.obj);
				this.from.name = newObj.name;
				this.from.detail = newObj.detail ? newObj.detail : '';
				this.from.phone = newObj.phone;
				this.from.isDefault = newObj.isDefault;
				this.from.cityId = newObj.province ? `${newObj.province}、${newObj.city}、${newObj.region}` : ''
				this.from.provinceId = newObj.provinceId;
				this.from.city = newObj.cityId;
				this.from.regionId = newObj.regionId;
				this.addressId = newObj.addressId;

				this.title = '修改地址'
				this.buttomText = '保存修改'
			} else {
				this.title = '添加新地址'
				this.buttomText = '保存'
			}

		},
		onShow() {
			that = this
		},
		computed: {
			search() {
				return this.$store.state.search;
			},

		},
		watch: {
			from: {
				handler: (val, oldval) => {
					let isBlurInput = that.blurInputs();

					if (isBlurInput) {
						that.isBlur = true;
					} else {
						that.isBlur = false;
					}
					console.log('that.isBlur-->', that.isBlur)

				},
				deep: true //对象内部的属性监听，也叫深度监听  
			}
		},
		methods: {
			// 选择地区
			bindRegionChange(e) {
				let {
					value
				} = e.detail;

				if (value[0] !== this.regionIndex[0]) {
					value[1] = 0;
					value[2] = 0;
				} else if (value[0] === this.regionIndex[0] && value[1] !== this.regionIndex[1]) {
					value[2] = 0;
				};

				this.regionIndex = value

			},
			// 确认选择
			pickerConfirm() {
				let str = `${this.region[this.regionIndex[0]].name}、${this.region[this.regionIndex[0]].childList[this
					.regionIndex[1]].name}、${this.region[this.regionIndex[0]].childList[this.regionIndex[1]].childList[
					this.regionIndex[2]].name}`
				this.from.cityId = str

				this.from.provinceId = this.region[this.regionIndex[0]].id;
				this.from.city = this.region[this.regionIndex[0]].childList[this.regionIndex[1]].id,
					this.from.regionId = this.region[this.regionIndex[0]].childList[this.regionIndex[1]].childList[this
						.regionIndex[2]].id
				this.showPicker = false

			},
			// 显示选择地区
			pickerShow() {

				this.showPicker = true

			},
			// 隐藏选择地区
			pickerHide() {

				this.showPicker = false

			},
			send() {
				let isSend = this.blurInput();
				if (isSend) return


				let obj = {
					name: this.from.name,
					detail: this.from.detail,
					phone: this.from.phone,
					isDefault: this.from.isDefault,
					provinceId: this.from.provinceId,
					cityId: this.from.city,
					regionId: this.from.regionId
				}
				if (this.addressId != '') {
					obj.addressId = this.addressId;
				}

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				this.$api.memberAddressWxAdd(obj).then(res => {
					if (res.code == 200) {
						// uni.showToast({
						// 	icon: 'none',
						// 	title: '保存成功',
						// 	mask: true
						// })
						this.isShowDui = true;
						setTimeout(() => {
							this.isShowDui=false;
							uni.navigateBack();
						}, 1000)

					}
				})




			},
			goPath(url) {
				uni.navigateTo({
					url
				})
			},
			goBack() {
				uni.navigateBack()
			},
			blurInputs() {
				if (this.from.name == '') {

					return false;
				}
				if (this.from.phone == 200 || this.from.phone == '' || !/^1[3456789]\d{9}$/.test(this.from.phone)) {

					return false;
				}
				if (this.from.cityId == '') {

					return false;
				}
				if (this.from.detail == '') {

					return false;
				}
				return true;
			},
			blurInput() {
				if (this.from.name == '') {
					uni.showToast({
						title: "收货人不能为空",
						icon: "none",
						mask: true
					})
					return true;
				}
				if (this.from.phone == 200 || this.from.phone == '' || !/^1[3456789]\d{9}$/.test(this.from.phone)) {
					uni.showToast({
						title: "请输入正确格式的手机号",
						icon: "none",
						mask: true
					})
					return true;
				}
				if (this.from.cityId == '') {
					uni.showToast({
						title: "收货地址不能为空",
						icon: "none",
						mask: true
					})
					return true;
				}
				if (this.from.detail == '') {
					uni.showToast({
						title: "详细地址不能为空",
						icon: "none",
						mask: true
					})
					return true;
				}

			},


		}
	}
</script>

<style scoped lang="scss">
	.myPages {
		min-height: 100vh;
		background-color: #F7F8FC;
		box-sizing: border-box;


		.myPages__remarkButtom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0 32rpx;
			padding-bottom: 48rpx;
			box-sizing: border-box;
			background-color: #F7F8FC;
			z-index: 9;
		}

		.myPages__remarkBoxs {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #F44B5B;
			opacity: 1;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #FFFFFF;
		}

		.myPages__paymentBox {
			padding: 32rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			margin: 20rpx 0;

		}

		.myPages__main {
			padding: 32rpx;
			width: 100%;
			box-sizing: border-box;
		}

		.myPages__mainBody {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0px 0px 40rpx rgba(228, 228, 245, 0.4);
			opacity: 1;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.myPages__mainBodyItems {
			height: 88rpx;
			display: flex;
			border-bottom: 3rpx solid #F0F2F8;
			align-items: center;
			font-size: 14px;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 20px;
			color: #2B2B33;
			position: relative;

		}

		.textareaH {
			height: 176rpx;
		}

		.where {
			height: 90rpx;
			line-height: 90rpx;
			position: absolute;
			left: 157rpx;
			top: 0;
		}

		.myPages__mainBodyItemsHeard {
			flex: 1;

			span {
				color: #f0414d;
				position: relative;
				right: -1px;
				top: -4px;
				font-size: 34rpx;
				font-weight: 550;

			}
		}

		.myPages__mainBodyItemsHeardInptH {
			height: 146rpx;
		}

		.myPages__mainBodyItemsHeardInpt {
			flex: 3;

		}

		.myPages__mainBodyItemsCatIem {
			width: 40rpx;
			height: 40rpx;
		}

		.myPages__mainBodyButtom_act {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #dedfe3;
			color: #FFFFFF;
			opacity: 1;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			margin-top: 32rpx;
		}
		.overlayBox {
			width: 202rpx;
			height: 90rpx;
			background: rgba(0, 0, 0, 0.9);
			border-radius: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
		
			image {
				display: inline-block;
				width: 34rpx;
				height: 34rpx;
			}
		
			span {
				display: inline-block;
				height: 34rpx;
				font-size: 24rpx;
				font-family: 蘋方-簡;
				font-weight: normal;
				line-height: 34rpx;
				color: #FFFFFF;
				margin-left: 8rpx;
		
			}
		}

		.myPages__mainBodyButtom {
			width: 622rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #F44B5B;
			color: #FFFFFF;
			opacity: 1;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			margin-top: 32rpx;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.saleBox {
			bottom: 0;
			margin: 32rpx;
			margin-bottom: 48rpx;
			width: 686rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;
			padding: 32rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;

		}

		.saleBox__HeardImg {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.saleBox__MainItem {
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			line-height: 104rpx;
			background: #f7f8fc;
			opacity: 1;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			color: #2B2B33;
			margin-top: 24rpx;

			span:nth-child(2) {
				font-size: 22rpx;
				font-family: 'DIN';
				color: #7b7d8d;
			}

		}

		.saleBox__MainItem--wthid {
			background: #dedfe3;
			color: #FFFFFF;
		}

		.saleBox__MainItem--red {
			background: #f44b5b;
			color: #FFFFFF;
			box-shadow: 0 28rpx 22rpx -26rpx #F44B5B;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

		}

		.saleBox__MainText {
			width: 100%;
			border-radius: 40rpx;
			font-size: 28rpx;
			margin-top: 24rpx;
			background-color: #f7f8fc;
			padding: 32rpx;
			box-sizing: border-box;
		}

		.saleBox__Heard {
			width: 100%;
			height: 48rpx;
			font-size: 28rpx;
			font-family: 'DIN';
			font-weight: normal;
			line-height: 48rpx;
			color: #2B2B33;
			text-align: center;

			span {
				font-size: 23rpx;
				font-family: 'DIN';
				font-weight: normal;
				color: #7B7D8D;
			}

		}

		.overlay {
			z-index: 666;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);
		}

		.popup {
			z-index: 667;
			position: fixed;
			bottom: 0;
			padding-bottom: 56rpx;
			left: 0;
			transform: translateY(100%);
			width: 100%;
			background-color: #fff;
			transition: all 300ms;
		}

		.popup.active {
			transform: translateY(0);
		}

		.title {
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			font-size: 32rpx;
		}

		.cancel {
			color: #f13;
		}

		.confirm {
			color: #3f1;
		}

		.address {
			font-size: 36rpx;
			font-weight: bold;
			color: #1D1930;
		}



	}
</style>
